<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>小米官网</title>
		<link rel="stylesheet" href="css/index.css">
		<style>
			/*150px*/
			
			html {
				width: 100%;
			}
			
			body {
				width: 1230px;
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<div class="big_wrap">
			<div class="wrap">
				<div class="header">
					<img src="images/logo-small.png" class="header_logo">
					<ul class="head_nav">
						<li>
							<a href="#">小米手机</a>
						</li>
						<li>
							<a href="#">红米</a>
						</li>
						<li>
							<a href="#">电视</a>
						</li>
						<li>
							<a href="#">笔记本</a>
						</li>
						<li>
							<a href="#">盒子</a>
						</li>
						<li>
							<a href="#">新品</a>
						</li>
						<li>
							<a href="#">路由器</a>
						</li>
						<li>
							<a href="#">智能硬件</a>
						</li>
						<li>
							<a href="#">服务</a>
						</li>
						<li>
							<a href=# "">社区</a>
						</li>

					</ul>
					<div class="header_input header-input-float-right">
						<input type="text" class="search">
						<button type="button" class="button"></button>
					</div>
					<div class=" placeholderText header-input-float-right ">
						<span>小米6X</span>
						<span>红米note5</span>
					</div>
					<img src="images/search.png" class=" searchImg header-input-float-right">
				</div>

			</div>
			<section class="scroll_sec">
				<div class="banner_container">
					<ul class="banner">
						<li><img src="images/banner1.jpg"></li>
						<li><img src="images/banner2.jpg" /></li>
						<li><img src="images/banner3.jpg" /></li>
						<li><img src="images/banner4.jpg" /></li>
						<li><img src="images/banner5.jpg" /></li>
						<li><img src="images/banner6.jpg" /></li>
					</ul>
				</div>
				<ul class="dotted">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div class="icon-sliderLeft" id="prev">

				</div>
				<div class="icon-slideRight" id="next">

				</div>
				<div class="banner_nav">
					<ul class="nav_ul">
						<li>
							<a href="#">手机 电话<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">电视 盒子<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">笔记本<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">智能 家电<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">健康 家居<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">出行 儿童<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">路由器 手机配件<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">移动电源 插线板<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">耳机 音箱<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<li>
							<a href="#">生活 米兔<img src="images/arrow-right.png" alt="" /></a>
						</li>
						<!-- hover部分开始 -->
						<div class="hoverDiv">
							<div class="hoverInner">
								<ul>
									<li><img src="images/hover1.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover3.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover5.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover6.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover9.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover10.png" alt="" /><span>小米6X</span></li>
								</ul>
								<ul>
									<li><img src="images/hover1.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover3.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover5.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover6.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover9.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover10.png" alt="" /><span>小米6X</span></li>
								</ul>
								<ul>
									<li><img src="images/hover1.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover3.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover5.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover6.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover9.png" alt="" /><span>小米6X</span></li>
									<li><img src="images/hover10.png" alt="" /><span>小米6X</span></li>
								</ul>
							</div>

						</div>
					</ul>
				</div>

			</section>
			<section class="banner_bottom">
				<div class="channel">
					<ul class="channelUl">
						<li>
							<a href="#"><img src="images/phone.png" alt="">
								<p>选购手机</p>
							</a>
						</li>
						<li>
							<a href="#"><img src="images/gift.png" alt="">
								<p>企业团购</p>
							</a>
						</li>
						<li>
							<a href="#"><img src="images/f.png" alt="">
								<p>F码通道</p>
							</a>
						</li>
						<li>
							<a href="#"><img src="images/card.png" alt="">
								<p>米粉卡</p>
							</a>
						</li>
						<li>
							<a href="#"><img src="images/new.png" alt="">
								<p>以旧换新</p>
							</a>
						</li>
						<li>
							<a href="#"><img src="images/charge.png" alt="">
								<p>话费充值</p>
							</a>
						</li>
					</ul>
				</div>
				<div class="imgContainer">
					<img src="images/img1.jpg" alt="">
					<img src="images/img2.jpg" alt="">
					<img src="images/img3.jpg" alt="">
				</div>
			</section>
			<!-- 小米闪购部分 -->
			<section class="quickBuy">
				<div class="quickBuy_nav">
					<p>小米闪购</p>
					<div class="arrowIcon">
						<div><img src="images/arrow-left.png" alt="" id="left" /></div>
						<div><img src="images/arrow-right.png" alt="" id="right" /></div>
					</div>
				</div>
				<div class="xmShopping">
					<div class="countDown">
						<p style="color: #EF3A51;font-size: 20px;margin:60px 0 30px 0;">12:00 场</p>
						<img src="images/flashpurchase.png" alt="">
						<p style="color:#706F6F;margin:35px 0;">距离开始还有</p>
						<div class="time">
							<div class="num" id="time_h">
								00
							</div>
							<span>:</span>
							<div class="num" id="time_m">
								00
							</div>
							<span>:</span>
							<div class="num" id="time_s">
								00
							</div>
						</div>
					</div>
					<div class="sliderContiner">
						<div class="sliderInner">
							<img src="images/quick.jpg" class="img1" />
							<img src="images/quick2.jpg" class="img2" />
							<img src="images/quick.jpg" class="img3" />
							<img src="images/quick2.jpg" class="img4" />
							<img src="images/quick2.jpg" class="img1" />
							<img src="images/quick2.jpg" class="img2" />
							<img src="images/quick.jpg" class="img3" />
							<img src="images/quick2.jpg" class="img4" />
						</div>

					</div>

				</div>
				<img src="images/mix.jpg" style="width: 100%;height: 120px;margin: 40px 0;">
			</section>
		</div>
		<!-- 头部的hover部分 -->
		<div class="header_hover" style="display:none;">
			<ul class="wrap wrap_ul">
				<li>
					<img src="images/5.jpg" />
					<p class="hover_name">小米MIX 2S</p>
					<p class="hover_price">3299元起</p>
				</li>
				<li>
					<img src="images/5x-2.jpg" />
					<p class="mibile_function">拍人更美</p>
					<p class="price">1440元</p>
				</li>
				<li>
					<img src="images/max2_toubu.png" alt="" />
					<p class="hover_name">小米MIX 2S</p>
					<p class="hover_price">3299元起</p>
				</li>
				<li>
					<img src="images/mix0.png" alt="" />
					<p class="hover_name">小米MIX 2S</p>
					<p class="hover_price">3299元起</p>
				</li>
				<li>
					<img src="images/mix2se.png" alt="" />
					<p class="hover_name">小米MIX 2S</p>
					<p class="hover_price">3299元起</p>
				</li>
				<li>
					<img src="images/note.png" alt="" />
					<p class="hover_name">小米MIX 2S</p>
					<p class="hover_price">3299元起</p>
				</li>
			</ul>
		</div>
		</div>
		<div class="big_wrap" style="background: #F5F5F5;">
			<div class="wrap">
				<!-- 手机部分开始 -->
				<div class="mobile_nav">
					<span>手机</span>
					<div class="checkAll">
						<span style="float:left;">查看全部</span>
						<div class="all_right">
							<img src="images/right_white.png" alt="">
						</div>
					</div>
				</div>
				<div class="mobile_list">
					<img src="images/mobile_left.jpg" style="width:235px;height:100%;float:left;position: relative;" class="mobile_left">
					<div class="mobile_right">
						<ul>
							<li>
								<img src="images/pms_1.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms_2.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms_3.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms_4.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
						</ul>
						<ul style="margin-top:15px;">
							<li>
								<img src="images/pms_5.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms_6.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms_7.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms_8.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
						</ul>
					</div>
				</div>
				<img src="images/xmad_Y.jpg" style="width: 100%;height: 120px;margin: 40px 0;">

				<!-- 家电部分开始 -->
				<div class="jd_nav">
					<span>家电</span>
					<ul class="jdList">
						<li>热门</li>
						<li>电视影音</li>
						<li>电脑</li>
						<li>家居</li>
					</ul>
				</div>
				<div class="mobile_list">
					<div style="width:235px;height:100%;float:left;position:relative;">
						<img src="images/xmad_JnZQo.jpg" class="jd_left mobile_left">
						<img src="images/xmad_dFlAw.jpg" class="jd_left mobile_left" style="margin-top:10px;">
					</div>

					<div class="mobile_right">
						<ul>
							<li>
								<img src="images/pms2_1.png" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms2_2.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms2_3.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms2_4.png" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
						</ul>
						<ul style="margin-top:15px;">
							<li>
								<img src="images/pms2_5.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms2_6.png" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms2_7.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
							<li>
								<img src="images/pms_8.jpg" alt="" />
								<p class="mobile_title">小米5X 4GB+64GB</p>
								<p class="mibile_function">光学变焦双摄，拍人更美</p>
								<p class="price">1440元</p>
							</li>
						</ul>
					</div>
				</div>
				<img src="images/xmad_N.jpg" style="width: 100%;height: 120px;margin: 40px 0;">
			</div>
		</div>
		<script src="js/jquery-3.1.0.min.js"></script>
		<script src="js/index.js" type="text/javascript"></script>
	</body>

</html>